<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { chuangguanApi, checkWorldApi, pinxiexunlianApi } from '../../api/request.js';
import { includeListGetItem } from '../../utils/index.js';
const props = defineProps({});
onMounted(() => {});
// 1美 2英
const type = ref(2);
let platform = uni.getStorageSync('platform');

const goback = async () => {
    uni.navigateBack();
};
const tijiao = async () => {
    if (!selectList.value.length && !noSelectList.value.length) {
        uni.showToast({
            title: '请选择需要强化的单词',
            icon: 'none'
        });
        return;
    }
    if (noSelectList.value.length) {
        uni.redirectTo({
            url: '/pages/common/huizongqianghua?id=' + noSelectList.value.join(',')
        });
        return;
    }
    uni.showToast({
        title: '恭喜完成本次闯关训练',
        icon: 'none'
    });
    uni.redirectTo({
        url: '/pages/user/components/worldStudyItem'
    });
};
const query = ref({
    learning_id: '',
    index: 0
});
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const list = ref(null);
const dui = ref([]);
const lists = ref([]);
onLoad(async (e) => {
    query.value.learning_id = e.id;
    query.value.type = e.type;
});
onShow(async () => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    uni.showLoading();
    let res;
    if (query.value.type == 1) {
        res = await chuangguanApi(query.value);
    } else {
        res = await pinxiexunlianApi(query.value);
    }
    console.log(res);
    uni.hideLoading();
    dui.value = res.data && res.data.correct ? res.data.correct : [];
    lists.value = res.data && res.data.error ? res.data.error : [];
    list.value = select.value == 1 ? dui.value : lists.value;
});

const select = ref('');
const changeSelect = (e) => {
    query.value.index = 0;
    select.value = e;
    list.value = select.value == 1 ? dui.value : lists.value;
};

//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
const getIdLists = ref([]);
//点击过是第几次点击
const statusList = ref({});
const playAudio = (id, url, status = false) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    uni.$emit('playAudio', http + `${url}`);
    nowIndex.value = id;
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        select.value == 0 ? getIdList.value.push(id) : getIdLists.value.push(id);
    }
    //剪纸盒子的骡子
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
};

const returnItemClassStatus = (id) => {
    if (nowIndex.value) {
        let index = includeListGetItem(select.value == 0 ? getIdList.value : getIdLists.value, id);
        if (index == -1) {
            return 'none';
        }
        const zhege = statusList.value.id == id;
        if (zhege) {
            let num = statusList.value.status;
            if (num == 1) {
                return 'heide';
            } else if (num == 2) {
                return 'fanyi';
            } else if (num == 3) {
                return 'kong';
            }
        }
    } else {
        return 'none';
    }
};
const noSelectList = ref([]);
const selectList = ref([]);
const changeSelectList = (id, type) => {
    if (type == 1) {
        //不会
        const index = noSelectList.value.findIndex((item) => item == id);
        if (index == -1) {
            noSelectList.value.push(id);
        }
        const indexs = selectList.value.findIndex((item) => item == id);
        if (indexs != -1) {
            selectList.value.splice(indexs, 1);
        }
    } else {
        const index = selectList.value.findIndex((item) => item == id);
        if (index == -1) {
            selectList.value.push(id);
        }
        const indexs = noSelectList.value.findIndex((item) => item == id);
        if (indexs != -1) {
            noSelectList.value.splice(indexs, 1);
        }
    }
};
const getSelectId = (id) => {
    return selectList.value.includes(id);
};
const getNoSelectId = (id) => {
    return noSelectList.value.includes(id);
};
const showTop = ref(false);
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <view class="lefts uni-row">
                <image
                    class="left"
                    src="/static/img/goback-black.png"
                    @click="goback"
                    mode="widthFix"
                />
                <view class="title"> 闯关统计 </view>
            </view>
            <view class="rights uni-row">
                <view class="menu">
                    <view class="item uni-row dayin" @click="showTop = !showTop"> 打印 </view>
                    <view class="item uni-row yings" v-show="showTop"> 英译汉 </view>
                    <view class="item uni-row yingss" v-show="showTop"> 汉译英 </view>
                </view>
                <view class="submit uni-row"> 全选 </view>
            </view>
        </view>
        <view class="menu-list uni-row">
            <view
                class="item uni-row"
                v-for="(item, index) in ['闯关不会（x）', '闯关会的（✓）']"
                :key="index"
                :class="{ active: index == select }"
                @click="changeSelect(index)"
            >
                {{ item }}
            </view>
        </view>
        <scroll-view
            :style="{ height: platform.gaodu - platform.dingbu - 96 - 160 - 48 + 'rpx' }"
            scroll-y="true"
            class="body"
            v-if="list && list.length"
        >
            <view class="" style="height: 20rpx" />
            <view
                class="item uni-row"
                :id="item.id"
                v-for="(item, index) in list"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.voice_file)"
            >
                <view class="zuo uni-row">
                    <text class="yuan uni-row">
                        {{ item.count }}
                    </text>
                    <view class="uni-row">
                        {{ item.word }}
                    </view>
                </view>
                <view class="fanti">
                    {{ item.cn_name }}
                </view>
                <view class="right uni-row">
                    <view
                        class="items uni-row"
                        v-for="(i, iIndex) in ['会', '不会']"
                        :key="iIndex"
                        @click.stop="changeSelectList(item.id, iIndex)"
                        :class="
                            iIndex == 0 && getSelectId(item.id)
                                ? 'default'
                                : iIndex == 1 && getNoSelectId(item.id)
                                ? 'active'
                                : ''
                        "
                    >
                        <image
                            :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/default-dui.png'
                                    : '/static/img/wolrd/default-cuo.png'
                            "
                            class="icon s"
                        ></image>
                        <image
                            :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/dui.png'
                                    : '/static/img/wolrd/cuo.png'
                            "
                            class="icon ss"
                        >
                        </image>
                        {{ i }}
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
    </view>
    <view class="footer-tongji uni-row">
        <view class="left-wrap uni-row">
            <view class="item uni-row">
                <image src="/static/img/wolrd/dui.png" class="dui"></image>
                {{ selectList.length }}词
            </view>
            <view class="item uni-row">
                <image src="/static/img/wolrd/cuo.png" class="dui"></image>
                {{ noSelectList.length }}词
            </view>
        </view>
        <view class="right uni-row" @click="tijiao"> 提交 </view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }

        .menu {
            position: relative;

            .item {
                justify-content: center;
                width: 144rpx;
                height: 52rpx;
                font-size: 24rpx;

                &.dayin {
                    color: #fff;
                    background: #fa862c;
                    border-radius: 8rpx;
                }

                &.yings {
                    position: absolute;
                    top: 52rpx;
                    z-index: 100;
                    background: #ffe5d2;
                    border-radius: 8rpx 8rpx 0 0;
                    color: #fa862c;
                }

                &.yingss {
                    border-radius: 0 0 8rpx 8rpx;
                    position: absolute;
                    top: 104rpx;
                    z-index: 100;
                    color: #fa862c;
                    background: #fff3ea;
                }
            }
        }

        .submit {
            font-size: 24rpx;
            color: #fff;
            background-color: #9561f3;
            justify-content: center;
            width: 144rpx;
            height: 52rpx;
            border-radius: 8rpx;
            margin-left: 32rpx;
        }
    }

    .menu-list {
        background-color: #fff;

        .item {
            flex: 1;
            height: 96rpx;
            justify-content: center;
            font-size: 30rpx;
            color: #333333;
            border-bottom: 1rpx solid transparent;

            &.active {
                color: #9561f3;
                font-weight: 500;
                border-bottom: 1rpx solid #9561f3;
            }
        }
    }

    .body {
        padding: 0 28rpx;

        .item {
            justify-content: space-between;
            height: 86rpx;
            margin-bottom: 16rpx;
            overflow: hidden;
            background-color: #fff;
            padding: 0 28rpx;
            border-radius: 8rpx;

            .zuo {
                .yuan {
                    justify-content: center;
                    width: 42rpx;
                    height: 42rpx;
                    border-radius: 50%;
                    background: #ef4828;
                    font-size: 24rpx;
                    margin-right: 30rpx;
                    color: #ffffff;
                }

                .yingwen {
                    font-size: 36rpx;
                    color: #333333;
                    line-height: 86rpx;
                }
            }

            .fanti {
                font-size: 28rpx;
                color: #333333;
                opacity: 0;
                transition: 0.2s all;
            }

            .right {
                .items {
                    width: 90rpx;
                    justify-content: center;
                    margin-left: 10rpx;
                    height: 48rpx;
                    font-size: 24rpx;
                    color: #999999;

                    .icon {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 10rpx;
                    }

                    .ss {
                        display: none;
                    }

                    &.active {
                        .s {
                            display: none;
                        }

                        .ss {
                            display: block;
                        }
                    }

                    &.default {
                        .ss {
                            display: block;
                        }

                        .s {
                            display: none;
                        }
                    }
                }
            }

            &.heide {
                .zuo {
                    .uni-row {
                        font-weight: 500;
                    }
                }
            }

            &.fanyi {
                .zuo {
                    .uni-row {
                        font-weight: 500;
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.kong {
                .zuo {
                    opacity: 0;
                }
            }
        }
    }
}

.footer-tongji {
    position: fixed;
    bottom: 28rpx;
    left: 0;
    right: 0;
    z-index: 33;
    justify-content: space-between;
    padding: 0 28rpx;

    .left-wrap {
        .item {
            font-size: 24rpx;
            color: #333333;
            margin-right: 18rpx;

            .dui {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
        }
    }

    .right {
        justify-content: center;
        width: 182rpx;
        height: 60rpx;
        background: #9561f3;
        border-radius: 16rpx;
        font-size: 30rpx;
        color: #ffffff;
    }
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 128rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}
</style>
